<template>
  <header class="header-bar">
    <div class="header-content">
      <div class="header-left">
        <h1 class="app-title">
          <el-icon class="title-icon"><Calendar /></el-icon>
          待办事项
        </h1>
      </div>
      
      <div class="header-right">
        <div class="user-info">
          <el-avatar :size="32" class="user-avatar">
            {{ user.nickname?.substr(-1) || 'U' }}
          </el-avatar>
          <span class="user-name">{{ user.nickname }}</span>
        </div>
        
        <el-dropdown @command="handleCommand">
          <el-button text class="user-menu-btn">
            <el-icon><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人资料</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    
    <!-- 个人资料对话框 -->
    <ProfileDialog 
      v-model="showProfileDialog"
      :user="user"
      @profile-updated="handleProfileUpdated"
    />
  </header>
</template>

<script>
import { ref } from 'vue'
import { Calendar, ArrowDown } from '@element-plus/icons-vue'
import ProfileDialog from './ProfileDialog.vue'

export default {
  name: 'HeaderBar',
  components: {
    Calendar,
    ArrowDown,
    ProfileDialog
  },
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  emits: ['logout', 'profile-updated'],
  setup(props, { emit }) {
    const showProfileDialog = ref(false)
    
    const handleCommand = (command) => {
      if (command === 'logout') {
        emit('logout')
      } else if (command === 'profile') {
        showProfileDialog.value = true
      }
    }
    
    const handleProfileUpdated = (updatedUser) => {
      emit('profile-updated', updatedUser)
    }
    
    return {
      showProfileDialog,
      handleCommand,
      handleProfileUpdated
    }
  }
}
</script>

<style scoped>
.header-bar {
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 64px;
  max-width: 95%;
  margin: 0 auto;
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
}

.app-title {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.title-icon {
  margin-right: 8px;
  color: var(--el-color-primary);
  font-size: 24px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  background: var(--el-color-primary);
  color: white;
  font-weight: 500;
}

.user-name {
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.user-menu-btn {
  padding: 4px;
  min-height: auto;
}

/* 响应式布局 */
@media (min-width: 1920px) {
  .header-content {
    max-width: 98%;
    padding: 0 24px;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .header-content {
    max-width: 96%;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .header-content {
    max-width: 94%;
  }
}

@media (max-width: 1199px) {
  .header-content {
    max-width: 92%;
    padding: 0 16px;
  }
}

@media (max-width: 768px) {
  .header-content {
    max-width: 100%;
    padding: 0 12px;
  }
  
  .user-name {
    display: none;
  }
  
  .app-title {
    font-size: 18px;
  }
}
</style> 